<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order系统</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="modernizr-custom.js"></script>
    <script src="eventUtil.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <form name="order" method="post" action="/submit">
        <h1>Order Form</h1>
        <fieldset>
            <legend>Contact Details</legend>
            <ul>
                <li>
                    <label class="required">
                        <div>Full Name</div>
                        <input name="name" required autofocus>
                    </label>
                </li>
                <li>
                    <label class="required">
                        <div>Email Address</div>
                        <input type="email" name="email" required>
                    </label>
                </li>
                <li>
                    <label>
                        <div>Postal Address</div>
                        <input name="address" placeholder="Address Line 1">
                    </label>
                    <div>&nbsp;</div>
                    <input name="city" class="city" placeholder="Town/City">
                    <input name="state" class="state" placeholder="State">
                    <input name="zip" class="zip" placeholder="Zip Code">
                    <div>&nbsp;</div>
                    <select name="country">
                        <option value="0">Country</option>
                        <option value="US">United States</option>
                        <option value="CA">Canada</option>
                    </select>
                </li>
                <li>
                    <label>
                        <div>Home Phone No.</div>
                        <input type="tel" name="homephone">
                    </label>
                </li>
                <li>
                    <label>
                        <div>Cell Phone No.</div>
                        <input type="tel" name="cellphone">
                    </label>
                </li>
                <li>
                    <label>
                        <div>Skype Name</div>
                        <input name="skype">
                    </label>
                </li>
                <li>
                    <label>
                        <div>Twitter</div>
                        <span class="twitter_prefix">@</span>
                        <input name="twitter" class="twitter">
                    </label>
                </li>
            </ul>
        </fieldset>
        <!--登录部分-->
        <fieldset>
            <legend>Login Details</legend>
            <ul>
                <li>
                    <label class="required">
                        <div>Password</div>
                        <input type="password" name="password" required/>
                    </label>
                </li>
                <li>
                    <label class="required">
                        <div>Confirm Password</div>
                        <input type="password" name="confirm_password" required/>
                    </label>
                </li>
            </ul>
        </fieldset>
        <!--订单明细部分 -->
        <fieldset>
            <legend>Order Details</legend>
            <table>
                <thead>
                    <tr>
                        <!--表头-->
                        <th>Product Code</th><th>Description</th><th>Qty</th>
                        <th>Price</th><th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            COMP001
                            <input type="hidden" name="product_code" value="COMP001"/>
                        </td>
                        <td>The Ultimate Smartphone</td>
                        <td>
                            <input type="number" data-price="399.99" name="quantity" value="0" min="0" max="99" maxlength="2"/>
                        </td>
                        <td>$399.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            COMP002
                            <input type="hidden" name="product_code" value="COMP002"/>
                        </td>
                        <td>The Ultimate Tablet</td>
                        <td>
                            <input type="number" data-price="499.99" name="quantity" value="0" min="0" max="99" maxlength="2"/>
                        </td>
                        <td>$499.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            COMP003
                            <input type="hidden" name="product_code" value="COMP003"/>
                        </td>
                        <td>The Ultimate Netbook</td>
                        <td>
                            <input type="number" data-price="299.99" name="quantity" value="0" min="0" max="99" maxlength="2"/>
                        </td>
                        <td>$299.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">Order Total</td>
                        <td>
                            <output name="order_total" id="order_total">$0.00</output>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </fieldset>
        <!-- 付款明细部分-->
        <fieldset>
            <legend>Payment Details</legend>
            <ul>
                <li>
                    <label class="required">
                        <div>Name on Card</div>
                        <input name="card_name" required/>
                    </label>
                </li>
                <li>
                    <label class="required">
                        <div>Credit Card No.</div>
                        <input name="card_number" pattern="[0-9]{13,16}" maxlength="16" required
                            title="13-16 digits,no spaces"/>
                    </label>
                </li>
                <li>
                    <label class="required">
                        <div>Expiry Date</div>
                        <input type="month" name="card_expiry" maxlength="7" placeholder="YYYY-MM" required value="2915-06"/>
                    </label>
                </li>
                <li>
                    <label class="required">
                        <div>CVV2 No.</div>
                        <input name="card_cvv2" class="cvv" maxlength="3" pattern="[0-9]{3}" required title="exactly 3 digits"/>
                        <span>(Three digit code at back of card)</span>
                    </label>
                </li>
            </ul>
        </fieldset>

        <div class="buttons">
            <input type="submit" value="Submit Order">
            <input type="submit" id="saveOrder" value="Save Order" formnovalidate formaction="/save">
        </div>
    </form>

</body>
</html>